<template>
    <div class="upload-container">
        <div class="upload-area" @dragenter.prevent="onDragEnter" @dragover.prevent="onDragOver"
            @dragleave.prevent="onDragLeave" @drop.prevent="onDrop" :class="{ 'dragging': isDragging }">
            <input type="file" ref="fileInput" class="file-input" @change="handleFileChange" :accept="accept" hidden />
            <div class="upload-content" @click="triggerFileInput">
                <van-icon name="plus" class="upload-icon" />
                <p class="upload-text">点击或拖拽文件到这里上传</p>
                <p class="upload-tip">{{ uploadTip }}</p>
            </div>
        </div>

        <div class="file-list" v-if="uploadedFiles.length > 0">
            <div class="file-item" v-for="file in uploadedFiles" :key="file.name">
                <div class="file-info">
                    <van-icon :name="fileIcon" class="file-icon" />
                    <span class="file-name">{{ file.name }}</span>
                    <span class="file-size">({{ formatFileSize(file.size) }})</span>
                </div>
                <div class="file-status">
                    <template v-if="file.status === 'uploading'">
                        <van-loading type="spinner" size="20" />
                        <span class="status-text">上传中...</span>
                    </template>
                    <template v-else-if="file.status === 'success'">
                        <van-icon name="success" class="success-icon" />
                        <span class="status-text">上传成功</span>
                    </template>
                    <template v-else-if="file.status === 'error'">
                        <van-icon name="cross" class="error-icon" />
                        <span class="status-text">上传失败</span>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { showToast } from 'vant'

    const props = defineProps({
        title: {
            type: String,
            default: 'Hi, 我是橙子！'
        },
        subtitle: {
            type: String,
            default: '请拖拽或点击上传文件'
        },
        uploadTip: {
            type: String,
            default: '支持 PDF、DOC、DOCX、JPEG、PNG 等格式'
        },
        accept: {
            type: String,
            default: '.pdf,.doc,.docx,.jpeg,.jpg,.png'
        },
        maxSize: {
            type: Number,
            default: 20 * 1024 * 1024 // 20MB
        },
        avatarSrc: {
            type: String,
            default: '/images/mine/ai-avatar.png'
        },
        fileIcon: {
            type: String,
            default: 'description'
        }
    })

    const emit = defineEmits(['file-selected', 'upload-success', 'upload-error'])

    const fileInput = ref(null)
    const isDragging = ref(false)
    const uploadedFiles = ref([])

    // 触发文件选择
    const triggerFileInput = () => {
        fileInput.value.click()
    }

    // 处理文件大小格式化
    const formatFileSize = (bytes) => {
        if (bytes === 0) return '0 B'
        const k = 1024
        const sizes = ['B', 'KB', 'MB', 'GB']
        const i = Math.floor(Math.log(bytes) / Math.log(k))
        return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
    }

    // 处理文件选择
    const handleFileChange = (event) => {
        const files = event.target.files
        if (files.length > 0) {
            handleFiles(Array.from(files))
        }
    }

    // 拖拽相关处理
    const onDragEnter = () => {
        isDragging.value = true
    }

    const onDragOver = () => {
        isDragging.value = true
    }

    const onDragLeave = () => {
        isDragging.value = false
    }

    const onDrop = (event) => {
        isDragging.value = false
        const files = event.dataTransfer.files
        if (files.length > 0) {
            handleFiles(Array.from(files))
        }
    }

    // 处理文件上传
    const handleFiles = async (files) => {
        for (const file of files) {
            // 检查文件大小
            if (file.size > props.maxSize) {
                showToast('文件大小不能超过20M')
                continue
            }

            // 添加到上传列表
            const fileInfo = {
                name: file.name,
                size: file.size,
                status: 'uploading'
            }
            uploadedFiles.value = [fileInfo] // 只保留当前上传的文件

            // 触发文件选择事件
            emit('file-selected', file)
        }
    }
</script>

<style lang="scss" scoped>
    // ... (样式代码与 wifi-upload.vue 相同)
    .upload-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 24px;
        text-align: center;

        @media screen and (min-width: 768px) {
            padding: 32px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }

        .avatar-section {
            margin-bottom: 24px;

            @media screen and (min-width: 768px) {
                margin-bottom: 32px;
            }

            .avatar {
                width: 80px;
                height: 80px;
                border-radius: 60px;
                margin-bottom: 20px;

                @media screen and (min-width: 768px) {
                    width: 100px;
                    height: 100px;
                }
            }

            h2 {
                font-size: 20px;
                color: #333;
                margin-bottom: 12px;

                @media screen and (min-width: 768px) {
                    font-size: 22px;
                }
            }

            .subtitle {
                font-size: 14px;
                color: #666;

                @media screen and (min-width: 768px) {
                    font-size: 15px;
                }
            }
        }

        .upload-area {
            border: 2px dashed #dcdee0;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            transition: all 0.3s;
            cursor: pointer;

            @media screen and (min-width: 768px) {
                padding: 32px;
                margin: 0 auto;
                max-width: 600px;
            }

            &.dragging {
                border-color: #165dff;
                background-color: rgba(22, 93, 255, 0.05);
            }

            &:hover {
                border-color: #165dff;
            }

            .upload-content {
                .upload-icon {
                    font-size: 32px;
                    color: #165dff;
                    margin-bottom: 16px;

                    @media screen and (min-width: 768px) {
                        font-size: 40px;
                    }
                }

                .upload-text {
                    font-size: 15px;
                    color: #333;
                    margin-bottom: 8px;

                    @media screen and (min-width: 768px) {
                        font-size: 16px;
                    }
                }

                .upload-tip {
                    font-size: 13px;
                    color: #999;

                    @media screen and (min-width: 768px) {
                        font-size: 14px;
                    }
                }
            }
        }

        .file-list {
            margin-top: 24px;
            max-width: 600px;
            margin: 24px auto 0;

            .file-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                background: #f5f6f7;
                border-radius: 8px;
                margin-bottom: 12px;

                .file-info {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .file-icon {
                        font-size: 18px;
                        color: #165dff;
                    }

                    .file-name {
                        font-size: 14px;
                        color: #333;

                        @media screen and (min-width: 768px) {
                            font-size: 15px;
                        }
                    }

                    .file-size {
                        font-size: 12px;
                        color: #999;

                        @media screen and (min-width: 768px) {
                            font-size: 13px;
                        }
                    }
                }

                .file-status {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .status-text {
                        font-size: 14px;
                        color: #666;
                    }

                    .success-icon {
                        color: #52c41a;
                    }

                    .error-icon {
                        color: #ff4d4f;
                    }
                }
            }
        }
    }
</style>